<!--tx动漫列表-->
<template>
	<el-row :gutter="20">
		<el-col :span="10">
			<el-image style="width: 266px; height: 354px" :src=" itemInfo.img"  >
			</el-image>
		</el-col>
		<el-col :span="12">
			<div class="title font-600 "  >{{ itemInfo.title }}</div>
			<div class="tag"> {{itemInfo.authorName }}</div>
			<div class="tag">
				<el-tag
					v-if="itemInfo.cateName"
					round
					v-for="tag in itemInfo.cateName.split(',')"
					:key="tag">
					{{ tag }}
				</el-tag>
			</div >
			<div class="tag">		人气：{{ itemInfo.view/100000000 }}亿</div>
			<div class="tag introduction">
				{{itemInfo.introduction}}
			</div>
			<div>
				<el-button type="primary" @click="to">开始阅读</el-button>
				<el-button type="primary" @click="behavior">{{ state.stat ? "取消收藏":"我要收藏"}}</el-button>
			</div>
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { userLogin } from '~/stores/userLogin'

const  emit = defineEmits(['userHeader'])
const router = useRouter()
const props = defineProps(<any>{
	itemInfo: Object, // 接收传递的 hotList 属性，类型为数组
});
const  state = reactive({
	stat: false,
})
watch(
	() => props.itemInfo,
	(newValue) => {
		if (newValue) {
			isBehavior(); // itemInfo 有值时调用函数
		}
	},
	{ immediate: true } // 设置为立即执行，确保首次加载时也调用
);

function to(){
	emit('userHeader')
}


function behavior() {
	 if (state.stat){
		 http.delete(`/behavior/${props.itemInfo.id}`).then(res =>{
			 isBehavior()
			 toast.success("取消成功！")
		 })
	 }else {
		 http.post(`/behavior/${props.itemInfo.id}`).then(res =>{
			 isBehavior()
			 toast.success("收藏成功！")
		 })
	 }
}
function isBehavior() {
	http.get(`/behavior/${props.itemInfo.id}`).then(res =>{
		state.stat = res.data
	})
}

onMounted(() => {

	if (userLogin().isLogin && props.itemInfo) {
		isBehavior(); // 在组件挂载时调用函数
	}
});

</script>
<style scoped>
.title{
	color: rgb(51, 51, 51);
	font-size: 32px;
	padding-bottom: 5px;
}
.tag{
	font-size: 16px;
	padding-bottom: 15px;
}
.introduction{
	width: 100%;
	color: #999;
	text-indent: 2em; /* 首行缩进两格 */
}
</style>
